<template>
  <div class="recuperate">
    <div class="top">调养</div>
    <div class="container">
      <h1>
        <div class="title">
          <img src="@/assets/img/kuai.png" alt="">
          <span>当下热门</span>
      </div>
      <!-- <router-link to="/recupDetails"> --> 
        <Recup v-for="(v,i) in arra" :key="i" :imgurl="v.imgurl" :titletext="v.titletext" :idd="v.idd"/>
      <!-- </router-link> -->
      </h1>
      <h1>
        <div class="title">
          <img src="@/assets/img/kuai.png" alt="">
          <span>呼吸</span>
      </div>
      <Recup v-for="(v,i) in arrb" :key="i" :imgurl="v.imgurl" :titletext="v.titletext" :idd="v.idd"/>
      </h1>
      <h1>
        <div class="title">
          <img src="@/assets/img/kuai.png" alt="">
          <span>常见问题</span>
      </div>
      <Recup v-for="(v,i) in arrc" :key="i" :imgurl="v.imgurl" :titletext="v.titletext" :idd="v.idd"/>
      </h1>
    </div>
    <Footer />
  </div>
</template>

<script>
import getlink from '../api/getlink.js'
import Recup from "../components/recup.vue";
export default {
  data(){
    return{
      arr:[],
      arra:[],
      arrb:[],
      arrc:[]
    }
  },
  components: {
    Recup,
  },
  created(){
    getlink("/data/list/xiaoming").then((ok)=>{
      this.arr=ok.data.recuperate
      this.arra=ok.data.recuperate.filter((item)=>{
        return item.title=="当下热门"
      })
      this.arrb=ok.data.recuperate.filter((item)=>{
        return item.title=="呼吸"
      })
      this.arrc=ok.data.recuperate.filter((item)=>{
        return item.title=="常见问题"
      })
    })
  }
};
</script>

<style scoped>
.container {
  margin-bottom: 2rem;
  margin-top: 0.6rem;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.22rem;
  font-weight: 700;
  border-bottom: 0.01rem solid #999;
  background-color: #fff;
}
.title img {
  width: 0.2rem;
  height: 0.2rem;
  margin: 0.1rem 0.1rem 0 0.2rem;
  float: left;
}
.title {
  width: 100%;
  height: 0.4rem;
  padding-top: .1rem;
  overflow: auto;
}
.title span:nth-child(2) {
  height: 0.4rem;
  float: left;
  line-height: 0.4rem;
}
</style>